<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KityMinder</title>

    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css" />
    <link rel="stylesheet" href="bower_components/hotbox/hotbox.css" />
    <link rel="stylesheet" href="bower_components/kityminder-core/dist/kityminder.core.css" />
    <link rel="stylesheet" href="bower_components/color-picker/dist/color-picker.min.css" />
    <!-- endbower -->

    <link rel="stylesheet" href="dist/kityminder.editor.css">

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
			width: 100%;
            overflow: hidden;
        }
        div.minder-editor-container {
            position: absolute;
            top: 0px;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body ng-app="kityminderDemo" ng-controller="MainController">
<kityminder-editor on-init="initEditor(editor, minder)"></kityminder-editor>
</body>
<!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
<!--internal.js默认是放到dialogs目录下的-->
<script type="text/javascript" src="../../dialogs/internal.js"></script>

<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/codemirror/lib/codemirror.js"></script>
<script src="bower_components/codemirror/mode/xml/xml.js"></script>
<script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="bower_components/codemirror/mode/css/css.js"></script>
<script src="bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="bower_components/codemirror/mode/markdown/markdown.js"></script>
<script src="bower_components/codemirror/addon/mode/overlay.js"></script>
<script src="bower_components/codemirror/mode/gfm/gfm.js"></script>
<script src="bower_components/angular-ui-codemirror/ui-codemirror.min.js"></script>
<script src="bower_components/marked/marked.min.js"></script>
<script src="bower_components/kity/dist/kity.min.js"></script>
<script src="bower_components/hotbox/hotbox.min.js"></script>
<script src="bower_components/json-diff/json-diff.js"></script>
<script src="bower_components/kityminder-core/dist/kityminder.core.js"></script>
<script src="bower_components/color-picker/dist/color-picker.min.js"></script>
<!-- endbower -->

<script src="dist/kityminder.editor.js"></script>


<script>
    var editoru = editor;
    var rng = editoru.selection.getRange(),
        img = rng.getClosedNode(),
        imgJson = img && $(img).attr('data-mind-json');

    angular.module('kityminderDemo', ['kityminderEditor'])
            .config(function (configProvider) {
                //configProvider.set('imageUpload', '../server/imageUpload.php');
            })
            .controller('MainController', function($scope) {
                $scope.initEditor = function(kmeditor, minder) {
                    window.editor = kmeditor;
                    window.minder = minder;

                    if (imgJson) {
                        kmeditor.minder.importJson(JSON.parse(imgJson));
                    }
                };
            });

    dialog.onok = function(){
        editor.minder.exportData("png").then(function(data) {
            editor.minder.exportData("json").then(function(data2) {
                editoru.execCommand('inserthtml', '<img src="'+ data +'" data-mind-json="' + utils.unhtml(data2) + '" />');
                dialog.close();
            });
        });

        return false;
    }
</script>

</html>